<template>
	<div class="resource-management">
		<nav-header>
			<template slot="menuBefore">
				<li><router-link to="/teaching/group/circle-group" tag="a">圈组列表</router-link></li>
				<li class="gap">&gt;</li>
			</template>
			<li>成员审核</li>
		</nav-header>
		<div class="zh-table">
			<div class="zh-table-contents">
			  	<el-table
			    :data="listData"
			    border
			    style="width: 100%">
				    <el-table-column
				      	prop="user_number"
				      	label="账户"
				      	align="center"
			      		show-overflow-tooltip
				    >
				    </el-table-column>
				    <el-table-column
				      	prop="user_name"
				      	label="用户名"
				      	align="center"
				      	show-overflow-tooltip
				    >
				    </el-table-column>
			        <el-table-column
		    	      	prop="org_name"
		    	      	label="组织"
		    	      	align="center"
				      	show-overflow-tooltip
		    	    >
			        </el-table-column>
			         <el-table-column
				      	prop="subject_name"
				      	label="学科"
				      	align="center"
				      	show-overflow-tooltip
				    >
				    </el-table-column>
				    <el-table-column
				      	prop="create_time"
				      	label="申请时间"
				      	align="center"
				      	show-overflow-tooltip
				    >
				    </el-table-column>
			        <el-table-column
		    	      	prop="group_name"
		    	      	label="圈组名称"
		    	      	align="center"
				      	show-overflow-tooltip
		    	    >
			        </el-table-column>
				    <el-table-column
				    	align="center"
				      	label="操作"
				    >
					    <template slot-scope="scope">
					      	<el-button @click="lookOver(scope.row)" type="text">查看</el-button>
					      	<el-button @click="approve_confirm(scope.row)" type="text">通过</el-button>
					      	<el-button @click="refusal(scope.row)" class="delete-button" type="text">拒绝 </el-button>
					    </template>
				    </el-table-column>
			  	</el-table>
			  	<div class="table-pagination" v-if="total_number > 10">
					<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="listParam.page_index"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="listParam.page_size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button 
							@click="getList"
							type="primary" icon="el-icon-refresh" 
							circle title="刷新数据" size="mini" >
						</el-button>
					</div>
				</div>
			</div>
		</div>
		<el-dialog
			title="拒绝理由"
			:visible.sync="refusalVisible"
			:close-on-click-modal="false" 
			:close-on-press-escape="false"
			:before-close="cancelReject"
			width="460px"
			custom-class="seeTxT">
				<div>
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
						<el-form-item prop="desc"  label-width="0">
						 	 <el-input type="textarea" 
						 	 rows="4" resize="none"
						 	 :maxlength="parseInt(200)"
						 	 placeholder="请输入拒绝理由, 不超200个字符"
						 	 v-model="ruleForm.desc"></el-input>
						 </el-form-item>
					</el-form>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="cancelReject">取 消</el-button>
					<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
				</div>
		</el-dialog>
	</div>
</template>
<script>
	export default{
		data() {
			return {
				loading:{
					status:false,
					txt:'获取数据...'
				},
				listData:[],
				listParam:{
		       		group_id:this.$route.params.id,
		       		status:3,
		       		data_type:2,
		       		add_type:1,
		       		page_index:1,
		       		page_size:10,
				},
				total_number:0,
				refusalVisible: false,
				ruleForm: {
					desc: ''
				},
				rules: {
					desc:[
        	            { validator: this.validateContent, trigger: 'blur', required: true }
        	        ],
				},
				approveParam:{
					user_id:0,
					group_id:0,
					status:0,
					comment:'',
				},
			}
		},
		created(){
			this.getList();
		},
		watch: {
			refusalVisible(){
				if(this.refusalVisible === false)
					this.$refs.ruleForm.resetFields()
			}
		},
		methods: {
			cancelReject() {
				this.$refs.ruleForm.clearValidate();
				this.refusalVisible = false;
				this.ruleForm.desc = '';
			},
			getList(){
				this.loading.status = true;
            	let success = (data=>{
            		this.loading.status = false;
            		this.listData = data.data.data;
            		this.total_number = data.data.data_sum;
            	})

            	var params = {
            		page:this.listParam.page_index,
            		size: this.listParam.page_size,
            		group_id:this.listParam.group_id,
		       		status:this.listParam.status,
		       		add_type:this.listParam.add_type,
		       		data_type:this.listParam.data_type,
            	}
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/group/group_user',{params: params,func:{success:success}})
            },
             handleSizeChange(val) {
		    	this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
		    },
			refusal(obj){
				this.approveParam = {
						user_id:obj.user_id,
						group_id:obj.group_id,
						status:2,
						comment:'',
					}
				this.refusalVisible = true
			},
			lookOver(obj){
				this.$alert(obj.comment, '申请理由', {
		          dangerouslyUseHTMLString: true,
		          showConfirmButton:false,
		        }).then(({ value }) => {}).catch(() => {});	
			},
			approve_confirm(obj){
				let yes = ( data => {
					this.approveParam = {
						user_id:obj.user_id,
						group_id:obj.group_id,
						status:1,
						comment:'',
					}
					this.approve();
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定批准 '+obj.user_name+' 吗？'});
			},
			approve(){
				let success = ( data => {
						this.refusalVisible = false;
			    		this.$message.success(data.msg);
						this.getList();
					});
		    	this.$ajax.post('api/group/approve_user',this.approveParam,{func:{success:success}})
				
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.approveParam.comment = this.ruleForm.desc;
						this.approve();
					} else {
						return false;
					}
				});
			},
			// 验证
			validateContent(rule, value, callback){
				if (value === '') {
                  	return callback(new Error('请输入拒绝理由'));
                } else if (!validateName(value)){
                	return callback(new Error('不能输入空格符号'));
                } else {
                	callback()
                }
			},
		}
	}
</script>

<style lang="scss">
	.resource-management{
		.el-table{
			margin-top: 30px;
		}
	}

	.seeTxT{
		.el-dialog__body{
			padding: 30px;
		}
	}
</style>